<template>
  <view @click="inputClick">
    <UniEasyinput
      @input="onInput"
      @clear="onClose"
      :placeholder="getPlaceholder"
      v-bind="getProps"
      :modelValue="getValue"
      :type="getType"
      :trim="true"
      :inputBorder="getBorder"
      :maxlength="getMaxlength"
      :clearable="clearable"
      :suffixIcon="suffixIcon"
      :prefixIcon="prefixIcon"
      :styles="styles"
      :autoHeight="autoHeight"
      @iconClick="iconClick"
      @focus="emit('focus')"
      @blur="emit('blur')"
    />
    <view v-if="getType === 'textarea' && showWordLimit" class="limit">{{ getValue?.length || 0  }}/ {{ getMaxlength }}</view>
  </view>
</template>

<script setup lang="ts">
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType } from 'vue';
  import { useFormItem } from '../hooks/useContext';
  import { useDebounceFn } from '@vueuse/core';
  import { isNullOrUnDef } from '@/utils/is';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import type { FormInputType } from '..';

  const { getPrivacySetting } = useAppStoreWithOut();

  type InputIcon = 'search' | 'clear';

  const props = defineProps({
    type: {
      type: String as PropType<FormInputType>,
      default: 'text',
    },
    modelValue: {
      type: [String, Number],
      default: '',
    },
    inputBorder: propTypes.bool.def(true),
    maxlength: propTypes.number.def(50),
    clearable: propTypes.bool.def(false),
    suffixIcon: String as PropType<InputIcon>,
    prefixIcon: String as PropType<InputIcon>,
    placeholder: propTypes.string.def(''),
    autoHeight: propTypes.bool.def(false),
    styles: {
      type: Object,
      default() {
        return {
          color: '#333',
          backgroundColor: 'transparent',
          disableColor: '#F7F6F6',
          borderColor: '#e5e5e5',
        };
      },
    },
    showWordLimit: propTypes.bool.def(false),
  });

  const emit = defineEmits(['close', 'update:modelValue', 'iconClick', 'focus', 'blur', 'input']);

  const { component, getProps, setFormModel, formProps } = useFormItem(props);

  const getType = computed(() => getProps.value.inputType || props.type);

  const getBorder = computed(() =>
    isNullOrUnDef(formProps?.border) ? props.inputBorder : !formProps?.border,
  );

  const getMaxlength = computed(() => {
    if (component === 'InputTextArea') {
      return getProps.value.maxlength || 1000;
    }
    if (component === 'InputNumber') return 9;
    return getProps.value.maxlength || props.maxlength;
  });

  const getPlaceholder = computed(() => {
    return getProps.value.placeholder || props.placeholder;
  });

  const showWordLimit = computed(() => {
    return getProps.value.showWordLimit || props.showWordLimit;
  });

  const getValue = computed(() => props.modelValue || getProps.value.modelValue);

  const onInput = useDebounceFn((value: string | number) => {
    setFormModel(value);
    emit('input', value);
    emit('update:modelValue', value);
  }, 300);

  function onClose() {
    emit('close');
    setFormModel('');
    emit('update:modelValue', '');
  }

  function iconClick(type: 'prefix' | 'suffix') {
    emit('iconClick', type);
  }

  function inputClick() {
    if (props.type === 'nickname') {
      getPrivacySetting();
    }
  }
</script>
<style scoped>
.limit {
    position: absolute;
    right: 20rpx;
    bottom: -32rpx;
    font-size: 24rpx;
    color: #606266;
}
</style>
